<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{margin: 0 auto;padding: 0;list-style: none;border: 0; text-align: center;}
    body{background: url(baidu/bg.jpg); -webkit-background-size: cover;
        background-size: cover;}
    .logo{margin-top: 30px; display: block;}
    .links{width: 740px; margin: 0 auto;}
    .links a{color: #fff; margin-right: 10px;}
    .search{margin-bottom: 40px; margin-top: 10px;}
    .search input{width: 537px; height: 40px;}
    .search button{width: 104px; height: 40px;}
    .container{width: 911px;}
    .menu{width: 80px; height: 318px; float: left; background: rgba(0,0,0,0.4);}
    .menu span{width: 80px; height: 35px; line-height: 35px; color: #fff; display: inline-block; font-weight: bold; font-size: 14px;}
    .menu span.choose{background: rgba(255,255,255,0.6) url(baidu/menu.png);}
    .card{width: 813px; height: 318px; float: right; background: rgba(255,255,255,0.6)  url(baidu/xingzuo.png);}

    .xingzuo{padding: 20px;}
    .item{
        margin-right: 10px;
        margin-bottom: 25px;
        cursor: pointer;
        width: 170px;
        height: 52px;
        float: left;
        position: relative;
    }
    .no-mr{margin-right: 0;}
    .image{
        float: left;
        width: 52px;
        height: 52px;
        background: url('xingzuo/xingzuo.png') no-repeat 0 52px;
    }
    .description{
        width: 115px;
        height: 43px;
        border: 2px solid #f1f1f1;
        border-left: none;
        float: left;
        padding-top: 6px;
    }
    .description p{
        padding-left: 8px;
        width: 90px;
        height: 18px;
        line-height: 18px;
        color: #222;
        text-align: left;
    }
    .mark{
        display: none;
    }
    .selected .mark{
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        background: url('xingzuo/xingzuo.png') no-repeat 0 -624px;
        display: block;
    }
    .is-hover .description{
        border-color: #389CFF;
        border-width: 2px;
    }
    .num-0 .image{
        background-position: 0 0;
    }
    .num-1 .image{
        background-position: 0 -52px;
    }
    .num-2 .image{
        background-position: 0 -104px;
    }
    .num-3 .image{
        background-position: 0 -156px;
    }
    .num-4 .image{
        background-position: 0 -208px;
    }
    .num-5 .image{
        background-position: 0 -260px;
    }
    .num-6 .image{
        background-position: 0 -312px;
    }
    .num-7 .image{
        background-position: 0 -364px;
    }
    .num-8 .image{
        background-position: 0 -416px;
    }
    .num-9 .image{
        background-position: 0 -468px;
    }
    .num-10 .image{
        background-position: 0 -520px;
    }
    .num-11 .image{
        background-position: 0 -572px;
    }
</style>
<script src="../jquery-1.11.3.js"></script>
<script src="itcast.js"></script>
<!--<script type="text/javascript" src="ICD.js"></script>-->
<script type="text/javascript">
//    使用对象描述数据
    var data = [
        {
            name:'白羊座',
            time:'3.21-4.19'
        }
        ,{
            name:'金牛座',
            time:'4.20-5.20'
        }
        ,{
            name:'双子座',
            time:'5.21-6.21'
        }
        ,{
            name:'巨蟹座',
            time:'6.22-7.22'
        }
        ,{
            name:'狮子座',
            time:'7.23-8.22'
        }
        ,{
            name:'处女座',
            time:'8.23-9.22'
        }
        ,{
            name:'天秤座',
            time:'9.23-10.23'
        }
        ,{
            name:'天蝎座',
            time:'10.24-11.22'
        }
        ,{
            name:'射手座',
            time:'11.23-12.21'
        }
        ,{
            name:'摩羯座',
            time:'12.22-1.19'
        }
        ,{
            name:'水瓶座',
            time:'1.20-2.18'
        }
        ,{
            name:'双鱼座',
            time:'2.19-3.20'
        }
    ];
</script>
<script type="text/javascript">

    $(function(){
        //    面向对象编程 -- 封装单个星座的各种操作
        var Xingzuo = function(data, num){
            this.data = data;
            this.dom =$('<div></div>').addClass('item num-' + num);
            this.num = num;
            this.init();
        };
        Xingzuo.prototype = {
            init : function(){
                this.create();
                this.bindEvent();
            }
            ,create : function(){
                var html = '<div class="image"></div>' +
                        '<div class="description">' +
                        '<p class="name">@(name)</p>' +
                        '<p class="time">@(time)</p>' +
                        '<div class="mark"></div>' +
                        '</div>';
                this.dom.html($$.formateString(html, this.data), true).appendTo($('.xingzuo'));
            }
            ,bindEvent : function(){
                var that = this;
                that.dom.on('click', function(e){
                    that.dom.toggleClass('selected');
                }).on('mouseenter', function(e){
                    that.dom.addClass('is-hover');
                }).on('mouseleave', function(e){
                    that.dom.removeClass('is-hover');
                })
            }
        };

//        实例化12个星座 -- 每次实例化都自动调用init函数
        for(var i = 0, len = data.length; i < len; i++){
            new Xingzuo(data[i], i);
        }
    })
</script>
<body>
<img class="logo" width="270" src="baidu/logo_white.png" alt="">
<p class="links">
    <a href="http://news.baidu.com" target="_blank">新闻</a>
    <a href="http://www.baidu.com" target="_blank">网页</a>
    <a href="http://tieba.baidu.com" target="_blank">贴吧</a>
    <a href="http://zhidao.baidu.com" target="_blank">知道</a>
    <a href="http://music.baidu.com" target="_blank">音乐</a>
    <a href="http://image.baidu.com" target="_blank">图片</a>
    <a href="http://v.baidu.com" target="_blank">视频</a>
    <a href="http://map.baidu.com" target="_blank">地图</a>
    <a href="http://baike.baidu.com" target="_blank">百科</a>
    <a href="http://wenku.baidu.com" target="_blank">文库</a>
    <a href="http://www.baidu.com/more/" target="_blank">更多&gt;&gt;</a>
</p>
<div class="search">
    <input type="text"><button>百度一下</button>
</div>
<div class="container">
    <div class="menu">
        <span>导航</span>
        <span>音乐</span>
        <span>新闻</span>
        <span class="choose">星座</span>
    </div>
    <div class="card"><div class="xingzuo"></div></div>
</div>
</body>
</html>